<template>
  <div>
    <header class="header">
      <div class="logo">
        <img src="@/assets/img_3.png" alt="商城logo">
      </div>
      <nav class="nav">
        <router-link to="/home" exact-active-class="active" style="margin-right: 20px;">首页</router-link>
        <router-link to="/products" exact-active-class="active " style="margin-right: 20px;">商品列表</router-link>
        <router-link to="/cart" exact-active-class="active" style="margin-right: 20px;">购物车</router-link>
        <router-link to="/checkout" exact-active-class="active" style="margin-right: 20px;">结算</router-link>
      </nav>
    </header>
    <main>
      <RouterView/>
    </main>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}

.logo img {
  height: 40px;
}

.nav {
  list-style: none;
  display: flex;
}

.nav li {
  margin-right: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav a.active {
  border-bottom: 2px solid #fff;
}
</style>